<template>
    <!-- 查询表单 -->
    <div class="search-form">
        <el-card class="search-card">
            <div class="search-container">
                <div class="search-fields">
                    <div class="field-row">
                        <el-button type="success" class="!ml-0" plain @click="dialogFormVisible = true">新增</el-button>
                        <el-select v-model="page.TestSchemeId" placeholder="请选择检验方案" class="search-input" clearable>
                            <el-option v-for="value in scheme" :label="value.testSchemeName" :value="value.id" />
                        </el-select>
                    </div>
                </div>
                <div class="search-actions">
                    <el-button type="primary" @click="list" class="search-btn">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                    <el-button type="info" @click="clearSearch" class="clear-btn">
                        <el-icon>
                            <Close />
                        </el-icon>
                        重置
                    </el-button>
                    <el-button type="warning" @click="toggleFullscreen" class="fullscreen-btn">
                        <el-icon>
                            <FullScreen />
                        </el-icon>
                        全屏
                    </el-button>
                </div>
            </div>
        </el-card>
    </div>

    <!-- 新增来料检验 -->
    <el-dialog v-model="dialogFormVisible" title="新增来料检验成品" width="500">
        <el-form :model="form" :rules="formRules" ref="formRef">
            <el-form-item label="成品" :label-width="formLabelWidth" prop="finishDisplayName">
                <el-input v-model="form.finishDisplayName" placeholder="请选择成品" readonly
                    @click="showFinishedDialog = true" style="cursor: pointer;" />
            </el-form-item>
            <el-form-item label="检验方案" :label-width="formLabelWidth" prop="testSchemeDisplayName">
                <el-input v-model="form.testSchemeDisplayName" placeholder="请选择检验方案" readonly
                    @click="showSchemeDialog = true" style="cursor: pointer;" />
            </el-form-item>
            <el-form-item label="供应商" :label-width="formLabelWidth">
                <el-select v-model="form.supplierId" placeholder="请选择状态" class="search-input" clearable>
                    <el-option v-for="s in supplierData" :label="s.supplierName" :value="s.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth" prop="finishNumber">
                <el-input-number v-model="form.finishNumber" :min="10" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addincoming">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 成品选择弹窗 -->
    <el-dialog v-model="showFinishedDialog" title="请选择成品" width="80%" :close-on-click-modal="false">
        <el-table :data="finishedTableData" style="width: 100%" @selection-change="handleFinishedSelection"
            v-loading="finishedLoading">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="finishedCode" label="成品编码" width="120">
                <template #header>
                    <span>成品编码</span>
                </template>
            </el-table-column>
            <el-table-column prop="finishedName" label="成品名称" width="150">
                <template #header>
                    <span>成品名称</span>
                </template>
            </el-table-column>
            <el-table-column prop="storageName" label="存储位置" width="150">
                <template #header>
                    <span>存储位置</span>
                </template>
            </el-table-column>
            <el-table-column prop="shelfName" label="货架名称" width="120">
                <template #header>
                    <span>货架名称</span>
                </template>
            </el-table-column>
            <el-table-column prop="storehouseName" label="仓库名称" width="120">
                <template #header>
                    <span>仓库名称</span>
                </template>
            </el-table-column>
            <el-table-column prop="finishedThrough" label="是否通过" width="100">
                <template #header>
                    <span>是否通过</span>
                </template>
            </el-table-column>
            <el-table-column prop="finishedSum" label="数量" width="100">
                <template #header>
                    <span>数量</span>
                </template>
            </el-table-column>
            <el-table-column prop="finishedUnit" label="单位" width="80">
                <template #header>
                    <span>单位</span>
                </template>
            </el-table-column>
            <el-table-column prop="addTime" label="添加时间" width="150">
                <template #default="scope">
                    {{ moment(scope.row.addTime).format("YYYY年MM月DD日") }}
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showFinishedDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmFinishedSelection">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 检验方案选择弹窗 -->
    <el-dialog v-model="showSchemeDialog" title="请选择检验方案" width="60%" :close-on-click-modal="false">
        <el-table :data="schemeTableData" style="width: 100%" @selection-change="handleSchemeSelection">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="方案编号" width="120" />
            <el-table-column prop="testSchemeName" label="检测方案名称" width="150" />
            <el-table-column prop="testKind" label="检测方案类型" width="120">
                <template #default="scope">
                    <el-tag v-if="scope.row.testKind == 1">全检</el-tag>
                    <el-tag v-if="scope.row.testKind == 2">抽检</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeWay" label="方式" width="100">
                <template #default="scope">
                    <span v-if="scope.row.testKind == 2">
                        <el-tag type="warning" v-if="scope.row.testSchemeWay == 1">百分比</el-tag>
                        <el-tag type="warning" v-if="scope.row.testSchemeWay == 2">间隔</el-tag>
                        <span type="warning" v-if="scope.row.testSchemeWay == 0"></span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeValue" label="值" width="90">
                <template #default="scope">
                    <span v-if="scope.row.testSchemeWay == 1">
                        <span v-if="scope.row.testSchemeValue == 0">全部</span>
                        <span v-if="scope.row.testSchemeValue > 0">{{ scope.row.testSchemeValue }}%</span>
                    </span>
                    <span v-if="scope.row.testSchemeWay == 2"> {{ scope.row.intervalValue * scope.row.extract * 0.1 }}
                    </span>
                    <span v-if="scope.row.testSchemeValue == 0"> </span>
                </template>
            </el-table-column>
            <el-table-column prop="testSchemeDes" label="备注" width="180" />
            <el-table-column prop="addProp" label="创建人" width="100" />
            <el-table-column prop="addTime" label="创建时间" width="200">
                <template #default="scope">
                    {{ moment(scope.row.addTime).format("YYYY年MM月DD日 hh:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column prop="updTime" label="修改时间" width="200">
                <template #default="scope">
                    <span v-if="scope.row.updTime == null"> </span>
                    <span v-if="scope.row.updTime != null">
                        {{ moment(scope.row.updTime).format("YYYY年MM月DD日 hh:mm:ss") }}</span>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showSchemeDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmSchemeSelection">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="finishCode" label="编码" width="140" />
        <el-table-column prop="finishedName" label="成品名称" width="140" />
        <el-table-column prop="testSchemeName" label="检测方案" width="150" />
        <el-table-column prop="finishNumber" label="物料总数" width="100" />
        <el-table-column prop="finishResults" label="结果" width="100">
            <template #default="scope">
                <el-tag type="success" v-if="scope.row.finishResults == 1">合格</el-tag>
                <el-tag type="danger" v-if="scope.row.finishResults == 2">不合格</el-tag>
                <el-tag type="primary" v-if="scope.row.finishResults == 3">已入库</el-tag>
                <el-tag type="warning"
                    v-if="scope.row.finishResults != 2 && scope.row.finishResults != 1 && scope.row.finishResults != 3">待审批</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="addProp" label="创建人" width="100" />
        <el-table-column prop="addTime" label="创建时间" width="200">
            <template #default="scope">
                {{ moment(scope.row.addTime).format("YYYY年MM月DD日 hh:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="200">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="ListFinishIncoming(scope.row)">详细信息</el-button>
                <el-button link type="primary" size="small" @click="Open(scope.row.finishCode)"
                    v-if="scope.row.finishType == 2">申请检验</el-button>
                <el-button link type="primary" size="small" @click="auditGet(scope.row.finishCode)">查看检验</el-button>
                <el-button link type="primary" size="small" @click="" v-if="scope.row.finishResults == 1">入库</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 自定义分页组件 -->
    <div class="pagination-container">
        <div class="pagination-card">
            <div class="pagination-left">
                <span class="total-text">共{{ page.count }}条数据</span>
            </div>
            <div class="pagination-right">
                <span class="total-count">共{{ page.count }}条</span>
                <el-select v-model="page.Pagesize" @change="list()" class="page-size-select">
                    <el-option label="5条/页" :value="5" />
                    <el-option label="10条/页" :value="10" />
                    <el-option label="15条/页" :value="15" />
                    <el-option label="20条/页" :value="20" />
                </el-select>
                <div class="page-navigation">
                    <el-button :disabled="page.Pageindex <= 1" @click="page.Pageindex = page.Pageindex - 1; list()"
                        class="nav-btn">
                        上一页
                    </el-button>

                    <!-- 显示页码 -->
                    <template v-for="p in displayPages" :key="p">
                        <el-button class="page-btn" :class="{ active: p === page.Pageindex }" @click="goToPage(p)">{{ p
                        }}</el-button>
                    </template>

                    <!-- 省略号 -->
                    <span v-if="totalPages > 3 && page.Pageindex < totalPages - 2" class="ellipsis">...</span>

                    <!-- 最后一页 -->
                    <el-button v-if="totalPages > 3 && page.Pageindex < totalPages - 2" class="page-btn"
                        @click="goToPage(totalPages)">{{ totalPages }}</el-button>

                    <el-button :disabled="page.Pageindex >= Math.ceil(page.count / page.Pagesize)"
                        @click="page.Pageindex = page.Pageindex + 1; list()" class="nav-btn">
                        下一页
                    </el-button>
                </div>
                <div class="page-jumper">
                    <span>前往</span>
                    <el-input v-model="jumpPage" @keyup.enter="jumpToPage" class="jump-input" />
                    <span>页</span>
                </div>
            </div>
        </div>
    </div>

    <el-dialog v-model="ListFinishIncomingDialog" title="查看成品信息" width="400">
        <el-form :model="formFinish">
            <el-form-item label="编号:" :label-width="formLabelWidth">{{ formFinish.id }}</el-form-item>
            <el-form-item label="成品名称:" :label-width="formLabelWidth">{{ formFinish.finishedName }}</el-form-item>
            <el-form-item label="方案名称:" :label-width="formLabelWidth">{{ formFinish.testSchemeName }}</el-form-item>
            <el-form-item label="数量:" :label-width="formLabelWidth">{{ formFinish.finishNumber }}</el-form-item>
            <el-form-item label="时间:" :label-width="formLabelWidth">
                {{ moment(formFinish.addTime).format("YYYY-MM-DD hh:mm:ss") }}</el-form-item>
            <el-form-item label="状态:" :label-width="formLabelWidth">
                <span v-if="formFinish.finishResults == 1">合格</span>
                <span v-if="formFinish.finishResults == 2">不合格</span>
                <span v-if="formFinish.finishResults == 3">已入库</span>
                <span v-if="formFinish.finishResults == null">待审批</span>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog v-model="dialogTableVisible" title="申请检验" width="800">
        <el-form :model="auditadd" class="demo-form-inline">
            <el-form-item label="流程名称">
                <el-select v-model="auditadd.definName" clearable style="width: 200px;">
                    <el-option v-for="defin in DefinData" :key="defin.definName" :label="defin.definName"
                        :value="defin.definName" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="audit">确定</el-button>
            </span>
        </template>

    </el-dialog>

</template>

<script lang="ts" setup>
import Maxios from '@/Http/MesHelp';
import moment from 'moment';
import { onMounted, ref, watch, reactive, computed } from 'vue';
import { Search, Close, ArrowLeft, ArrowRight, FullScreen, Grid, Refresh, Setting, Menu } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';

const dialogFormVisible = ref(false)
const ListFinishIncomingDialog = ref(false)
const isFullscreen = ref(false)
const showFinishedDialog = ref(false)
const showSchemeDialog = ref(false)
const formLabelWidth = '140px'
const jumpPage = ref(1)
const formRef = ref()

// 正整数验证规则
const positiveIntegerValidator = (rule: any, value: any, callback: any) => {
    if (value === null || value === undefined || value === '') {
        callback()
        return
    }
    const num = Number(value)
    if (isNaN(num) || !Number.isInteger(num) || num <= 0) {
        callback(new Error('请输入正整数'))
    } else {
        callback()
    }
}

// 表单验证规则
const formRules = {
    finishDisplayName: [
        { required: true, message: '请选择成品', trigger: 'change' }
    ],
    testSchemeDisplayName: [
        { required: true, message: '请选择检验方案', trigger: 'change' }
    ],
    finishNumber: [
        { required: true, message: '请输入数量', trigger: 'blur' },
        { validator: positiveIntegerValidator, trigger: 'blur' }
    ]
}

// 成品相关数据
const finishedTableData = ref<any[]>([])
const finishedLoading = ref(false)
const selectedFinisheds = ref<any[]>([])
const currentFinished = ref<any>(null)

// 检验方案相关数据
const schemeTableData = ref<any[]>([])
const selectedSchemes = ref<any[]>([])

const formFinish = ref({
    id: 0,
    finishId: 0,
    finishedName: "",
    testSchemeId: 0,
    testSchemeName: "",
    finishCode: "",
    supplierId: 0,
    finishNumber: 0,
    finishType: 0,
    finishResults: null,
    approvalAccountName: null,
    approvalDate: null,
    approvalDesc: null,
    addProp: "",
    addTime: "",
    updProp: null,
    updTime: null,
    qualifiedNumber: null,
    noQuality: null
})

const ListFinishIncoming = (data: any) => {
    ListFinishIncomingDialog.value = true
    formFinish.value.id = data.id
    formFinish.value.finishId = data.finishId
    formFinish.value.finishedName = data.finishedName
    formFinish.value.testSchemeName = data.testSchemeName
    formFinish.value.finishCode = data.finishCode
    formFinish.value.supplierId = data.supplierId
    formFinish.value.finishNumber = data.finishNumber
    formFinish.value.finishResults = data.finishResults
    formFinish.value.approvalAccountName = data.approvalAccountName
    formFinish.value.approvalDate = data.approvalDate
    formFinish.value.approvalDesc = data.approvalDesc
    formFinish.value.addProp = data.addProp
    formFinish.value.addTime = data.addTime
    formFinish.value.qualifiedNumber = data.qualifiedNumber
    formFinish.value.noQuality = data.noQuality
}


const form = ref({
    finishId: 0,
    finishDisplayName: "",
    testSchemeId: 0,
    testSchemeDisplayName: "",
    supplierId: 0,
    finishNumber: 1,
    addProp: ""
})

//添加
const addincoming = () => {
    if (!formRef.value) return
    formRef.value.validate((valid: boolean) => {
        if (!valid) return
        console.log(form.value)
        Maxios.post("/api/TestFinishIncome/AddFinish", form.value).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                dialogFormVisible.value = false
                form.value.finishId = 0
                form.value.finishDisplayName = ''
                form.value.testSchemeId = 0
                form.value.testSchemeDisplayName = ''
                form.value.supplierId = 0
                form.value.finishNumber = 1
                form.value.addProp = ''
                list()
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
    })
}

//删除
const handleClick = (id: any) => {
    ElMessageBox.confirm(
        '确定要逻辑删除本条数据吗?',
        '注意',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        Maxios.post("/api/TestFinishIncome/DeleteFinish", { id: id }).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                list()
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
    })
}

const scheme = ref([{
    id: "",
    testSchemeName: ""
}])

//检验方案显示
const listScheme = () => {
    Maxios.get("/api/TestScheme/ListScheme", {
        params: {
            Pageindex: 1,
            Pagesize: 100,
        }
    }).then(res => {
        scheme.value = res.data.data.list
    })
}


const tableData = ref([])

const page = ref({
    Pageindex: 1,
    Pagesize: 5,
    TestSchemeId: null,
    count: 0,
    page: 0,
    id: ""
})

//显示
const list = () => {
    if (route.query.id != null || route.query.id != undefined) {
        page.value.id = (route.query.id).toString()
    }
    Maxios.get("/api/TestFinishIncome/ListFinish", { params: page.value }).then(res => {
        tableData.value = res.data.data.list

        page.value.count = res.data.data.count
        page.value.page = res.data.data.page
    })
}

//成品显示
const finishedlist = () => {
    Maxios.get("/api/Storehouse/FinishedShow", {
        params: {
            Pageindex: 1,
            Pagesize: 100,
        }
    }).then(res => {
        finishedTableData.value = res.data.data.list
        console.log(finishedTableData.value);
    })
}

// 清空搜索条件
const clearSearch = () => {
    page.value.TestSchemeId = null
    page.value.Pageindex = 1
    list()
}

// 全屏切换
const toggleFullscreen = () => {
    isFullscreen.value = !isFullscreen.value
    if (isFullscreen.value) {
        // 进入全屏
        const element = document.documentElement
        if (element.requestFullscreen) {
            element.requestFullscreen()
        } else if ((element as any).webkitRequestFullscreen) {
            (element as any).webkitRequestFullscreen()
        } else if ((element as any).msRequestFullscreen) {
            (element as any).msRequestFullscreen()
        }
    } else {
        // 退出全屏
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if ((document as any).webkitExitFullscreen) {
            (document as any).webkitExitFullscreen()
        } else if ((document as any).msExitFullscreen) {
            (document as any).msExitFullscreen()
        }
    }
}

// 跳转到指定页面
const jumpToPage = () => {
    const totalPages = Math.ceil(page.value.count / page.value.Pagesize)
    if (jumpPage.value >= 1 && jumpPage.value <= totalPages) {
        page.value.Pageindex = jumpPage.value
        list()
    } else {
        ElMessage.warning(`请输入1到${totalPages}之间的页码`)
    }
}

// 计算总页数与展示页码
const totalPages = computed(() => Math.max(1, Math.ceil(page.value.count / page.value.Pagesize)))

const displayPages = computed(() => {
    const total = totalPages.value
    const current = page.value.Pageindex

    if (total <= 3) {
        // 总页数小于等于3，显示所有页
        return Array.from({ length: total }, (_, i) => i + 1)
    }

    if (current <= 3) {
        // 当前页在前3页，显示前3页
        return [1, 2, 3]
    }

    if (current >= total - 2) {
        // 当前页在后3页，显示后3页
        return [total - 2, total - 1, total]
    }

    // 当前页在中间，显示当前页前后各1页
    return [current - 1, current, current + 1]
})

const goToPage = (p: number) => {
    if (p < 1 || p > totalPages.value) return
    page.value.Pageindex = p
    list()
}

const pageScheme = ref({
    Pageindex: 1,
    Pagesize: 100,
    TestSchemeName: "",
    TestKind: null,
})
// 获取检验方案数据
const loadSchemeData = () => {
    Maxios.get("/api/TestScheme/ListScheme", { params: pageScheme.value }).then(res => {
        schemeTableData.value = res.data.data.list
        console.log(res.data.data.list);
    })

}

// 处理成品选择
const handleFinishedSelection = (selection: any[]) => {
    selectedFinisheds.value = selection
}



// 处理检验方案选择
const handleSchemeSelection = (selection: any[]) => {
    selectedSchemes.value = selection
}

// 确认成品选择
const confirmFinishedSelection = () => {
    if (selectedFinisheds.value.length === 0) {
        ElMessage.warning('请选择成品')
        return
    }

    // 取第一个选中的成品
    const selectedFinished = selectedFinisheds.value[0]

    // 反填数据到表单
    form.value.finishId = selectedFinished.id

    // 更新输入框显示 - 使用更安全的方式
    form.value.finishDisplayName = `${selectedFinished.finishedName}`

    showFinishedDialog.value = false
    ElMessage.success('成品选择成功')
}

// 确认检验方案选择
const confirmSchemeSelection = () => {
    if (selectedSchemes.value.length === 0) {
        ElMessage.warning('请选择检验方案')
        return
    }

    // 取第一个选中的检验方案
    const selectedScheme = selectedSchemes.value[0]

    // 反填数据到表单
    form.value.testSchemeId = selectedScheme.id

    // 更新输入框显示
    form.value.testSchemeDisplayName = `${selectedScheme.testSchemeName}`

    showSchemeDialog.value = false
    ElMessage.success('检验方案选择成功')
}

// 监听弹窗打开事件
watch(showFinishedDialog, (newVal) => {
    if (newVal) {
        finishedlist()
    }
})

watch(showSchemeDialog, (newVal) => {
    if (newVal) {
        loadSchemeData()
    }
})

const supplierData = ref([{
    "id": 0,
    "supplierName": "",
}])

///供应商信息
const supplier = () => {
    Maxios.get("/api/Supplier/ListSupplier", {
        params: {
            Pageindex: 1, Pagesize: 100
        }
    }).then(res => {
        supplierData.value = res.data.data.list
    })
}

const User = reactive({
    Name: localStorage.getItem("userNickname") || ''
})
//成品检测 入库方法
const waremData: any = ref({
    "OutName": "",
    "OutSum": 0,
    "OutThing": "",
    "OutCode": "",
    "OutStates": "",
    "WareId": 0,
    "FinishId": 0,
    "IncomingCode": "",
    "FinishCode": "",
    "AddProp": User.Name
})
const OutAddData = (data: any) => {
    //alert("asdsadasdas")
    console.log("asd", data)
    waremData.value.OutName = "成品入库"
    waremData.value.OutSum = data.finishNumber
    waremData.value.OutThing = data.finishName
    waremData.value.FinishCode = data.finishCode

    waremData.value.FinishId = 1

    console.log(waremData.value);

    Maxios.post("/api/Storehouse/OutorinAdd", waremData.value).then(res => {
        if (res.data.code == 200) {
            ElMessage.success("入库成功")
            list()
        }
        else {
            ElMessage.error("入库失败")
            list()
        }
    })
}

onMounted(() => {
    list()//列表显示
    DefinShow()
    supplier()
    listScheme()
})
const route = useRoute()
const router = useRouter()
const dialogTableVisible = ref(false)
const auditadd = ref({
    "definName": "",
    "id": ""
})
const dialogaudit = ref(false)
const auditGet = (id: any) => {
    router.push({ path: "/audit", query: { id } })
}

const Open = (id: any) => {
    auditadd.value.id = id

    dialogTableVisible.value = true


}
//添加
const audit = () => {
    Maxios.post("/api/Audit/AuditAdd", auditadd.value).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.message)
            dialogTableVisible.value = false
            list()
        }
        else {
            ElMessage.error(res.data.message)
        }
    })

}
interface DefinItem {
    definName: string
}

const DefinData = ref<DefinItem[]>([])

const DefinShow = () => {
    Maxios.post("/api/Audit/GetDefinition"
    ).then(res => {
        DefinData.value = res.data.data
    })

}


</script>

<style scoped>
.search-form {
    margin-bottom: 20px;
}

.search-card {
    background: #f5f5f5;
    border-radius: 8px;
}

.search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}

.search-fields {
    flex: 1;
}

.field-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.search-input {
    width: 200px;
}

.search-input :deep(.el-input__wrapper) {
    border-radius: 6px;
    background: white;
}

.search-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.clear-btn {
    background: #f0f0f0;
    border: 1px solid #d9d9d9;
    color: #666;
    border-radius: 6px;
}

.clear-btn:hover {
    background: #e6e6e6;
    border-color: #bfbfbf;
}

.fullscreen-btn {
    background: #fdf6ec;
    border: 1px solid #f5dab1;
    color: #e6a23c;
    border-radius: 6px;
}

.fullscreen-btn:hover {
    background: #faecd8;
    border-color: #eebe77;
    color: #d48806;
}

.search-btn {
    border-radius: 6px;
}

.search-btn:hover {
    opacity: 0.8;
}

/* 分页组件样式 */
.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: auto;
}

.pagination-card {
    background: white;
    border-radius: 8px;
    padding: 16px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    min-width: 600px;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.total-text {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

.pagination-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.total-count {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

.page-size-select {
    width: 100px;
    flex-shrink: 0;
}

.page-size-select :deep(.el-input__wrapper) {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
}

.page-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nav-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    border: none;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-btn:hover:not(:disabled) {
    color: #409eff;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.current-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #409eff;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
}

.page-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    border: none;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #606266;
}

.page-btn:hover {
    color: #409eff;
}

.page-btn.active {
    background: #409eff;
    color: white;
}

.ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #c0c4cc;
    font-size: 14px;
    flex-shrink: 0;
}

.page-jumper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}

.jump-input {
    width: 60px;
}

.jump-input :deep(.el-input__wrapper) {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .pagination-card {
        padding: 12px 16px;
        gap: 12px;
    }

    .pagination-right {
        gap: 8px;
    }

    .total-count {
        display: none;
    }
}

@media (max-width: 768px) {
    .pagination-container {
        justify-content: flex-start;
        padding: 0 16px;
    }

    .pagination-card {
        min-width: 100%;
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pagination-left {
        justify-content: center;
    }

    .pagination-right {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-size-select {
        width: 80px;
    }

    .jump-input {
        width: 50px;
    }
}

@media (max-width: 480px) {
    .pagination-right {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .page-navigation {
        order: 1;
    }

    .page-size-select {
        order: 2;
    }

    .page-jumper {
        order: 3;
    }
}

/* 物料弹窗样式 */
.material-dialog-header {
    margin-bottom: 16px;
}

.dialog-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.control-icon {
    cursor: pointer;
    color: #666;
    font-size: 16px;
}

.control-icon:hover {
    color: #409eff;
}

.export-text {
    color: #666;
    font-size: 14px;
    cursor: pointer;
}

.export-text:hover {
    color: #409eff;
}

.search-icon {
    margin-left: 4px;
    color: #999;
    font-size: 12px;
}

/* 弹窗表格样式 */
:deep(.el-dialog__body) {
    padding: 20px;
}

:deep(.el-table__header-wrapper) {
    background: #f5f7fa;
}

:deep(.el-table th) {
    background: #f5f7fa;
    color: #606266;
    font-weight: 500;
}

:deep(.el-table__row:hover) {
    background: #f5f7fa;
}

/* 只读输入框样式 */
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    cursor: pointer;
}

:deep(.el-input.is-disabled .el-input__inner) {
    color: #606266;
    cursor: pointer;
}
</style>
